<template>
  <section style="height: 100%;background: #fff;">
    <header class="header_same"></header>
    <div class="choose_tip">
      *身份证和手机号码二选一填写
    </div>
    <div class="loan_content">

      <div class="choose_loan">
        <div class="choose_list" @click="chooseInput()">
          <img :src="inputOne" class="pay_logo">
          <span>身份证</span>
        </div>
        <div style="margin-left: 1.8rem" class="choose_list"  @click="chooseInput2()">
          <img :src="inputTwo" class="pay_logo">
          <span>手机号</span>
        </div>
      </div>
      <div style="height: 1px;background: #F2F2F2;margin: 0 .24rem;"></div>
      <yd-cell-item v-if="showPhone" >
        <span slot="left">手机号</span>
        <yd-input slot="right" v-model="input8" ref="input8" required :show-required-icon="true" :show-success-icon="true" :show-error-icon="true" regex="mobile" placeholder="请输入手机号" style="margin-left: 0.38rem;
"></yd-input>
      </yd-cell-item>
      <yd-cell-item v-if="showId">
        <span slot="left">身份证号</span>
        <yd-input slot="right" v-model="input2" ref="input2" required :show-required-icon="true" :show-success-icon="true" :show-error-icon="true" :regex="idReg" placeholder="请输入身份证号码" style="margin-left: 0.1rem;
"></yd-input>
      </yd-cell-item>

    </div>
    <div  class="footer_pos">
      <div class="foot_left">
        <span>需付金额：</span><span style="color: red;font-weight: bold; ">￥3.00</span>
      </div>
      <div class="foot_right" @click="show2()">
        立即验证
      </div>
    </div>
    <payPart :show-wrap="iswrap"></payPart>
  </section>
</template>

<script>
  import payPart from '@/components/api/pay_part';
  export default {
    name:'toLoan',
    data() {
      return {
        input8:'',
        input2:'',
        iswrap:false,
        idReg:'/^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$/',
        showId:true,
        showPhone:false,
        inputOne:require('../../assets/api/blue.png'),
        inputTwo:require('../../assets/api/no.png'),
        payway:1,
      }
    },
    methods:{
      show2(){

        const input8 = this.$refs.input8;
        const input2 = this.$refs.input2;

        if(this.payway == 1){
          if(input2.valid == false){
            this.$dialog.notify({
              mes: '请完善身份证号',
              timeout: 1500,
            });
            return;
          }
        }else{
          if(input8.valid == false){
            this.$dialog.notify({
              mes: '请完善手机号',
              timeout: 1500,
            });
            return;
          }
        }

        this.iswrap = !this.iswrap;
      },
      chooseInput(){
        this.payway = 1;
        this.inputOne = require('../../assets/api/blue.png');
        this.inputTwo = require('../../assets/api/no.png');
        this.showId = true;
        this.showPhone = false;
      },
      chooseInput2(){
        this.payway = 2;
        this.inputOne = require('../../assets/api/no.png');
        this.inputTwo = require('../../assets/api/blue.png');
        this.showId = false;
        this.showPhone = true;
      }
    },
    components:{
      payPart
    }
  }
</script>

<style>
  .header_same{
    width: 100%;
    height: 1.9rem;
    background-image: url("../../assets/mine/mobile_head.png");
    background-size: 100% 100%;
  }
  .loan_content{
    box-shadow: 0px 5px 10px rgba(194,194,194,.2);
  }
  .choose_loan{
    display: flex;
    box-shadow: 0px -5px 10px rgba(194,194,194,.2);
    height: 1rem;
    align-items: center;
    padding: 0 .24rem;
  }
  .choose_list{
    display: flex;
    align-items: center;
  }
  .footer_pos{
    width: 100%;
    height: 1rem;
    background: #F5F5F5;
    position: fixed;
    bottom: 0;
    display: flex;
  }
  .foot_left{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }
  .foot_right{
    width: 2.5rem;
    height: 1rem;
    background: #E72A26;
    color: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pay_logo{
    width: 0.5rem;
    height: 0.5rem;
  }
  .pay_content{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 1rem;
    padding: 0 .24rem;
  }
  .pay_title{
    height: 1rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .pay_center{
    display: flex;
    align-items: center;
    margin-top: .5rem;
    justify-content: center;
  }
  .pay_img{
    width: .4rem;
    height: .4rem;
  }
  .pay_count{
    margin-top: .44rem;
    padding-bottom: .86rem;
    border-bottom: 1px solid #f2f2f2;
    font-weight: bold;
    font-size: .5rem;
  }
  .pay_way{
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
  }
  .pay_way div{
    display: flex;
    align-items: center;
  }
  .pay_btn{
    width: 100%;
    height: 1rem;
    position: absolute;
    bottom: 0;
    background: #E72A26;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .choose_tip{
    text-align: left;
    height: .6rem;
    display: flex;
    align-items: center;
    padding-left: .24rem;
    color: #21a8ee;
  }
</style>
